<template>
  <el-container style="padding: 40px; background: #fff; min-height: 100vh;">
    <el-main>
      <el-card shadow="always" style="max-width: 1000px; margin: auto; padding: 40px;">
        <h2 style="text-align:center; font-size:28px;">考试结果</h2>
        <div style="text-align:center; font-size:24px; margin: 18px 0;">
          总分：<b>{{ score }}</b> / 100
        </div>
        <div v-if="score >= 60" style="text-align:center; color:#67c23a; font-size:20px; font-weight:bold; margin-bottom: 18px;">
          🎉 恭喜你，考试通过！
        </div>
        <div v-else style="text-align:center; color:#f56c6c; font-size:20px; font-weight:bold; margin-bottom: 18px;">
          ❌ 很遗憾，未通过考试，请重新作答。
        </div>
        <div style="text-align:center; margin-bottom: 24px;">
          <el-button type="primary" @click="restart" size="large">重新考试</el-button>
          <el-button @click="backHome" size="large">返回首页</el-button>
        </div>

        <el-divider content-position="center">📄 答题详情（只显示对错）</el-divider>

        <!-- 增加滚动容器 -->
        <div class="scroll-box">
          <div v-for="(q, idx) in questions" :key="idx" class="result-question-box">
            <div class="result-q-title">
              <span class="result-q-no">{{ idx + 1 }}.</span>
              {{ q.question }}
              <span v-if="correctList[idx]" class="result-correct">✔ 正确</span>
              <span v-else class="result-wrong">✘ 错误</span>
              <span style="margin-left:12px; color:#888;">({{ q.score }}分)</span>
            </div>
          </div>
        </div>

      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { questions as allQuestions } from '../assets/questions.js'
import { ref } from 'vue'

const route = useRoute()
const router = useRouter()

const score = Number(route.query.score || 0)
const userAnswers = ref([])
const correctList = ref([])

const questions = allQuestions

try {
  userAnswers.value = JSON.parse(route.query.answers || '[]')
  correctList.value = JSON.parse(route.query.correct || '[]')
} catch {
  userAnswers.value = []
  correctList.value = []
}

const restart = () => router.push('/exam')
const backHome = () => router.push('/home')
</script>

<style scoped>
.result-question-box {
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.result-q-title {
  font-size: 20px;
  font-weight: bold;
}
.result-q-no {
  color: #0b0c0c;
  margin-right: 8px;
}
.result-correct {
  color: #67c23a;
  font-weight: bold;
  margin-left: 8px;
}
.result-wrong {
  color: #f56c6c;
  font-weight: bold;
  margin-left: 8px;
}

/* 增加滚动容器 */
.scroll-box {
  max-height: 600px;
  overflow-y: auto;
  margin-top: 20px;
  border: 1px solid #ffffff;
  border-radius: 8px;
  background: #fafafa;
  padding: 20px;
}
</style>
